<template>
  <div class="personal-details">
    <NavBar>
      <template #default>
        个人详情
      </template>
    </NavBar>

    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="avatar-section">
        <el-avatar :size="80" :src="userInfo.avatar" />
        <div class="online-status" :class="{ 'online': userInfo.userStatus === 1 }">
          {{ userInfo.userStatus === 1 ? '在线' : '离线' }}
        </div>
      </div>
      <div class="user-info">
        <div class="name-row">
          <h3>{{ userInfo.userName }}</h3>
          <el-tag v-if="userInfo.roles && userInfo.roles.length > 0" size="small">
            {{ userInfo.roles[0] }}
          </el-tag>
        </div>
        <div class="detail-row">
          <el-icon><User /></el-icon>
          <span>{{ genderText }}</span>
        </div>
        <div class="detail-row">
          <el-icon><Iphone /></el-icon>
          <span>{{ userInfo.mobile || '未绑定手机' }}</span>
        </div>
        <div class="detail-row">
          <el-icon><Message /></el-icon>
          <span>{{ userInfo.email || '未绑定邮箱' }}</span>
        </div>
      </div>
    </div>

    <!-- 功能选项 -->
    <div class="option-list">
      <div class="option-item" @click="handleEditProfile">
        <div class="option-left">
          <el-icon><Edit /></el-icon>
          <span>编辑资料</span>
        </div>
        <el-icon><ArrowRight /></el-icon>
      </div>
      <div class="option-item" @click="handleChangePassword">
        <div class="option-left">
          <el-icon><Lock /></el-icon>
          <span>修改密码</span>
        </div>
        <el-icon><ArrowRight /></el-icon>
      </div>
      <div class="option-item" @click="handleAccountSecurity">
        <div class="option-left">
          <el-icon><Setting /></el-icon>
          <span>账号安全</span>
        </div>
        <el-icon><ArrowRight /></el-icon>
      </div>
    </div>

    <!-- 退出登录按钮 -->
    <div class="logout-btn" @click="handleLogout">
      退出登录
    </div>
  </div>
</template>

<script setup>
import NavBar from '../../components/common/NavBar.vue';
import {
  User, Iphone, Message, Edit,
  Lock, Setting, ArrowRight
} from '@element-plus/icons-vue';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus' // 引入element-plus的消息提示组件
import { useUserStore } from '@/stores/userStore'; // 导入 Pinia store

const router = useRouter();
const userStore = useUserStore(); // 使用 Pinia store

// 从本地存储获取用户信息
const userInfo = userStore.userAccount || {};

// 计算性别显示文本
const genderText = computed(() => {
  switch (userInfo.gender) {
    case 1: return '男';
    case 2: return '女';
    default: return '未知';
  }
});

// 编辑资料
const handleEditProfile = () => {
  router.push('/editProfile');
};

// 修改密码
const handleChangePassword = () => {
  router.push('/changePassword');
};

// 账号安全
const handleAccountSecurity = () => {
  router.push('/accountSecurity');
};

// 退出登录
const handleLogout = () => {
  localStorage.removeItem('token');
  localStorage.removeItem('userAccount');
  ElMessage.success('退出登录成功');
  router.push('/login');
};
</script>

<style scoped>
.personal-details {
  background-color: white;
  min-height: 100vh;
  padding-bottom: 60px;
}

/* 用户卡片样式 */
.user-card {
  background-color: #fff;
  padding: 20px;
  /* margin: 15px 10px 10px 10px; */
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
}

.avatar-section {
  position: relative;
  margin-right: 20px;
}

.online-status {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #ccc;
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 12px;
}

.online-status.online {
  background-color: #67c23a;
}

.user-info {
  flex: 1;
}

.name-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.name-row h3 {
  margin: 0;
  margin-right: 10px;
  font-size: 18px;
  color: #333;
}

.detail-row {
  display: flex;
  align-items: center;
  margin: 8px 0;
  color: #666;
  font-size: 14px;
}

.detail-row .el-icon {
  margin-right: 8px;
  color: #999;
}

/* 选项列表样式 */
.option-list {
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.option-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
}

.option-item:last-child {
  border-bottom: none;
}

.option-left {
  display: flex;
  align-items: center;
}

.option-left .el-icon {
  margin-right: 10px;
  color: #ff5000;
}

.option-left span {
  color: #333;
}

/* 退出登录按钮 */
.logout-btn {
  margin: 20px 15px;
  padding: 12px 0;
  background-color: #ff5000;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}
</style>